<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <meta name="keywords" content="商品列表"/>
    <meta name="description" content="商品列表"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <meta name="viewport" content="width=device-width,viewport-fit=cover">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/public.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/swiper.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/goodslist.css}">
    <link th:href="@{/shoppingApi/css/weui.min.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/jquery-weui.min.css}" rel="stylesheet">
    <style>
        * {
            box-sizing: border-box;
        }

        .goodslist .goodscon li > a > span {
            height: 9rem;
            background-color: #fff;
        }

        .goodscon li a > div p:first-of-type {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: auto;
        }
    </style>
</head>
<body>
<div class="main goodslist">
    <div class="main_con c323232">
        <div class="bgfff top">
            <div class="pl15 pr15 flex flex-ac search">
                <img class="back mr10" th:src="@{/shoppingApi/images/back.png}">
                <p class="it1 rela inputtext">
                    <a class="db">
                        <input type="text" placeholder="请输入搜索内容">
                    </a>
                </p>
            </div>
        </div>
        <div class="pl15 pr15 banner c323232 bgfff">
            <!--三级分类-->
            <div class="swiper-container ft14">
                <div class="swiper-wrapper">
                    <div class="swiper-slide active ">全部</div>
                    <div class="swiper-slide" th:each="sjclassify:${map.RJClassifyList}">
                        <div class="swiper-slide  sj-classify-name" th:if="${sjclassify!=null}"
                             th:text="${sjclassify.classifyName}"></div>
                        <input type="hidden" class="classId" name="classId" th:value="${sjclassify.classId}"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="line"></div>
        <ul class="goodscon overflow" style="padding-top: 5px;background-color: #f0f0f0">
            <li th:each="indexProduct:${map.indexProductList}">
                <a class="product-href"
                   th:href="@{${'/wap/getDetails?productId='+indexProduct.productId+'&guigeId='+indexProduct.guigeId}}">
                    <span><img class="w100 productHot-img" th:attr="src=@{${indexProduct.proImg}}"></span>
                    <!--<input type="hidden" name="productId" th:attr="value=${indexProduct.proId}">-->
                    <div class="bgfff pt5 pl15 pb15">
                        <p class="ft14 c323232 " th:text="${indexProduct.productName}"></p>
                        <p class="cf70029 mt5">
                            <span class="ft14">￥</span><span class="ft17 mr10"
                                                             th:text="${#numbers.formatDecimal(indexProduct.proPrice,0,2)}">21.9</span>
                        </p>
                    </div>
                </a>
            </li>
        </ul>
        <!-- 滑动分页-->
        <!--<div class="weui-loadmore  weui-loadmore1">-->
        <!--<i class="weui-loading  weui-loading1"></i>-->
        <!--<span class="weui-loadmore__tips  weui-loadmore__tips1">正在加载</span>-->
        <!--<input type="hidden" class="pageNum" name="pageNum" value="0">-->
        <!--</div>-->
    </div>

</div>
</body>
<script type="text/javascript" th:src="@{/shoppingApi/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/shoppingApi/js/common.js}"></script>
<script th:src="@{/shoppingApi/js/swiper.min.js}"></script>
<script th:src="@{/shoppingApi/js/jquery-weui.min.js}"></script>
<script type="text/javascript" th:src="@{/shoppingApi/js/H5Plus/common.js}"></script>
<script>
    /*请求头定义*/
    var header = $("meta[name='_csrf_header']").attr("content");
    var token = $("meta[name='_csrf']").attr("content");
    var mySwiper = new Swiper('.swiper-container', {
        slidesPerView: 4,
        spaceBetween: 30,
        observer: true,
        observeParents: true,
        on: {
            click: function () {
                var clickedIndex = this.clickedIndex;
                this.slideTo(clickedIndex, 1000, true);
                if (!$(".banner .swiper-slide").eq(clickedIndex).hasClass('active')) {
                    $(".banner .swiper-slide").eq(clickedIndex).siblings().removeClass('active');
                    $(".banner .swiper-slide").eq(clickedIndex).addClass('active');
                    $(".main_con .tabul").eq(clickedIndex).siblings(".tabul").addClass("hide");
                    $(".main_con .tabul").eq(clickedIndex).removeClass("hide");
                }
            }
        }
    })
    $(".searchout li").on('click', function () {
        var text = $(this).find("span").text();
        if (!$(this).hasClass("active")) {
            $(this).siblings().removeClass("active")
            $(this).addClass("active");
            $(".default_arrow").removeClass("up_arrow");
            $(".default_arrow").removeClass("down_arrow");
        }
        if ($(this).hasClass("up_arrow")) {
            $(this).addClass("down_arrow")
            $(this).removeClass("up_arrow")
        } else if ($(this).hasClass("default_arrow")) {
            $(this).addClass("up_arrow")
            $(this).removeClass("down_arrow")
        } else {
            $(this).addClass("up_arrow")
            $(this).removeClass("down_arrow")
        }
    })
    $(".search .inputtext").on('click', function () {
        window.location.href = "/wap/search"
    })
    $(".search .close").on('click', function () {
        $(".search input:text").val("")
    })
    $(".back").on('click', function () {
        window.history.back(-1);
    })


    //  /*调用滚动加载*/
    // infinite();
    //
    //  /*weui滚动加载*/
    //  var str="";
    //  var loading = false;  //状态标记
    //  var pageNum=parseInt($('.pageNum').val());
    //  var classId=$('.classId').val();
    //  function infinite() {
    //      $('.goodslist').infinite(100).on("infinite", function () {
    //          if (loading) return;
    //          loading = true;
    //          pageNum=pageNum+1;
    //          // alert("pageNum:"+pageNum);
    //          $.ajax({
    //              url:"/wap/selectProSjClassfy?pageNum="+pageNum+"&rjClassId="+classId,
    //              success:function (result) {
    //
    //                  if(result.productHotList==null){
    //                      loading=true;
    //                      $('.tabul').destroyInfinite();
    //                      $('.weui-loadmore1').hide();
    //                      $('.goodscon').append("<p style='font-size: 12px;margin-left: 50%'>没有更多了</p>");
    //                  }else{
    //                      getsjClassifyData(result.productHotList);
    //                      loading=false;
    //                      // $('.tabul').destroyInfinite();
    //                      $('.pageNum').val(pageNum);
    //                      $('.weui-loadmore1').hide();
    //                  }
    //              },
    //              beforeSend : function(xhr) {
    //                  xhr.setRequestHeader(header, token);
    //              }
    //          })
    //
    //          // loading = false;
    //          //模拟延迟
    //      });
    //  }


    /*点击二级页面产品进入三级页面*/

    // $('.goodscon').on('click','.product-href',function () {
    //
    //     var productId=$('.product-href').children('input').val();
    //     window.location.href="/wap/getDetails?productId="+productId;
    //
    // })

    /*点击导航的二级分类名称*/
    $('.sj-classify-name').on('click', function () {

        $('.goodslist .banner .swiper-container .active ').css({"color": "black"});
        $('.sj-classify-name').css({"color": "black"});
        $(this).css({"color": "#f70029"});

        var classId = $(this).siblings('input').val();

        $.ajax({
            url: "/wap/selectSjClassfyByClassId?rjClassId=" + classId,
            success: function (result) {
                $(".goodscon").find('li').remove();
                getsjClassifyData(result.indexProductList);
            }
        })
    })

    function getsjClassifyData(sjClassData) {
        $.each(sjClassData, function (i, item) {
            str = "<li>" +
                "                <a class='product-href' href=\"/wap/getDetails?productId=" + item.productId + "&guigeId=" + item.guigeId + "\">\n" +
                "                    <span><img class='w100 productHot-img' src='" + item.proImg + "' ></span>\n" +
                "                    <input type=\"hidden\" name=\"productId\" value='" + item.productId + "'>\n" +
                "                    <div class=\"bgfff pt5 pl15 pb15\">\n" +
                "                        <p class=\"ft14 c323232\" >" + item.productDesc + "</p>\n" +
                "                        <p class=\"cf70029 mt5\">\n" +
                "                            <span class=\"ft14\">￥</span><span class=\"ft17 mr10\">" + item.proPrice + "</span>\n" +
                "                        </p>\n" +
                "                    </div>\n" +
                "                </a>\n" +
                "            </li>";

            $(".goodscon").append(str);
        })

    }

</script>
</html>
